<template>
  <div>
    <el-card style="width: 96%; margin: 20px auto">
        <div class="top"><p class="p1">基础信息</p></div>
        <el-form  label-width="400px" style="margin:10px 0" 
        :rules="rules"
        :model="productList"
        ref="productList"
        class="demo-ruleForm"
         >
        <el-form-item  label-width="400px"  label="ID:" prop="id" >
            <el-input disabled style="width: 611px;" v-model="productList.id"></el-input>
        </el-form-item>
        <el-form-item label="名称:" prop="name">
            <el-input style="width: 611px;" v-model="productList.name"></el-input>
        </el-form-item>
        <el-form-item label="描述:" prop="name">
            <el-input style="width: 611px;" v-model="productList.description"></el-input>
        </el-form-item>
        <el-form-item label="产地:" prop="name">
            <el-input style="width: 611px;" v-model="productList.origin"></el-input>
        </el-form-item>
        <el-form-item label="备注:" prop="name">
            <el-input style="width: 611px;" v-model="productList.remark"></el-input>
        </el-form-item>
        <el-form-item label="品牌:" prop="name">
            <el-input style="width: 611px;" v-model="productList.brand"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="update">更新</el-button>
          <el-button type="danger" @click="goback">取消</el-button>
        </el-form-item>
        </el-form>
    </el-card>
    <!-- 附件 -->
  </div>
</template>

<script>
export default {
  name: 'Edit',
  data() {
      return {  
          productList:{},
       rules: {
        id: [{ required: true, message: "请输入", trigger: "blur" }],
        name: [{ required: true, message: "请输入相关内容", trigger: "blur" }],
      },
      };
  },
  
  methods:{ 
    //   点击取消返回主页面
    goback() {
      this.$emit('goback')
    },
    //   获取当前对象并保存
    getEdit(value){ 
        this.productList = value
    },
    // 点击更新将修改的数据传给园页面
    update(){ 
        let itemName = this.productList.name
        let itemId = this.productList.id
        let itemTion = this.productList.description
       let itemGin =this.productList.origin
       let itemMark = this.productList.remark
        let itemBrand =this.productList.brand
        let itemList = {itemName,itemId,itemTion,itemGin,itemMark,itemBrand}
        this.$bus.$emit('update', itemList)
        // 
    }

  },
//   接受父组件传递过来的对象
mounted(){ 
    this.$bus.$on('edit',this.getEdit)
}
  
}
</script>

<style lang='scss' scoped>
    .top{ 
        width: 100%;
        height: 30px;
        line-height: 10px;
        border-bottom: solid 1px #eee;
    }
    .input{
        width: 311px;
        height: 26px;
        padding:  6px 11px;
        border: solid 1px #eee;
    }
</style>
